<template>
  <div class="top">
    <div class="header_cont" v-if="props.user === null">
      <img src="../assets/image/用户.png" alt=""/>
      <a href="#" style="color: red" @click="isShow=true">登录</a>

    </div>
    <div class="header_cont header_mar" v-else>
      <img src="../assets/image/书架.png" alt="">
      <a href="/book/id" target="_blank">我的书架</a>
      <a href="#" style="color: red" @click="logout">退出</a>
    </div>
  </div>
  <login-pop :isShow="isShow" @exit="exit"></login-pop>
</template>

<script setup>
import {defineProps, ref, defineEmits} from 'vue'
import LoginPop from "@/components/LoginPop.vue";

// 变量
let isShow = ref(false)

//常量
const props = defineProps({
  user: {
    type: Object,
    default: null,
  }
})

const emits = defineEmits(['logout'])

// 方法
let logout = () => {
  emits('logout')
}

let exit = () => {
  isShow.value = false
}
</script>

<style>
.top {
  width: 100%;
  height: 7%;
}

.header_cont {
  float: right;
  padding-top: 10px;
  padding-right: 6%;
  height: 60px;
  width: 200px;
}

.header_mar {
  padding-right: 10%;
}

.header_cont img {
  height: 30px;
  width: 30px;
  vertical-align: bottom;
}

.header_cont a {
  font-family: 字心坊猫的天空之城, serif;
  font-size: 20px;
}

</style>